<template>
  <div class="user">
    <div class="user-top">
      <van-image
        width="1.5rem"
        height="1.5rem"
        fit="cover"
        round
        :src="userinfo.photo"
      />
      <div class="username">
        <h4>{{ userinfo.name }}</h4>
        <van-tag color="#fff" text-color="#3296fa" type="primary">{{
          userinfo.birthday
        }}</van-tag>
      </div>
    </div>
    <van-row type="flex" justify="space-around">
      <van-col span="8">
        <van-icon name="newspaper-o" color="skyblue" size="25" />
        <p>我的作品</p></van-col
      >
      <van-col span="8"
        ><van-icon name="star-o" color="red" size="25" />
        <p>我的收藏</p></van-col
      >
      <van-col span="8"
        ><van-icon name="tosend" color="orange" size="25" />
        <p>阅读历史</p></van-col
      >
    </van-row>
    <van-cell title="编辑资料" icon="edit" is-link to="/edit" />
    <van-cell title="小智同学" icon="chat-o" is-link to="/student" />
    <van-cell title="系统设置" icon="setting-o" is-link to="index" />
    <van-cell title="退出登录" icon="warning-o" is-link @click="getto" />
  </div>
</template>
<script>
import userimg from '../../assets/user.png'
import { removeToken } from '../../utils/token'
import { mapState } from 'vuex'

// import { getuserInfo } from '../../api/user'
export default {
  name: 'my',
  created () {
    // getuserInfo().then(res => {
    //   console.log(res)
    //   this.userInfo = res.data.data
    // })
  },
  data () {
    return {
      // msg:''
      // userInfo: {},
      userimg: userimg
    }
  },
  computed: {
    // userinfo () {
    //   return this.$store.state.userinfo
    // },
    ...mapState(['userinfo'])
  },
  methods: {
    getto () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '你真的要退出吗？'
        })
        .then(() => {
          // on confirm
          removeToken()
          this.$store.commit('changeinfo', {})
          this.$router.push({ path: '/home' })
        })
        .catch(() => {
          // on cancel
          console.log(2)
        })
    }
  }
}
</script>
<style lang="less">
.user {
  .user-top {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: #3296fa;
    .van-image {
      width: 60px;
      height: 60px;
      margin: 0 5px 0 15px;
    }
    .username {
      color: #fff;
      font-weight: 400;
      font-size: 15px;
    }
  }
  .van-row {
    text-align: center;
    font-size: 14px;
    padding: 20px 0;
  }
}
</style>
